<template>
  <div>
    <t-card class="list-card-container">
      <t-table
        :data="data"
        :columns="OPT_COLUMNS"
        row-key="id"
        vertical-align="top"
        :hover="true"
        :pagination="pagination"
        :loading="dataLoading"
        :selected-row-keys="selectedRowKeys"
        @page-change="rehandlePageChange"
      >
        <template #jobStatus="{ row }">
          <t-tag v-if="row.jobStatus === 1" variant="light"> 待完成 </t-tag>
          <t-tag v-if="row.jobStatus === 2" theme="primary" variant="light"> 己完成 </t-tag>
        </template>
        <template #op="slotProps">
          <a class="t-button-link" @click="handleClickDetail(slotProps)">查询结果</a>
        </template>
      </t-table>
    </t-card>
  </div>
</template>

<script setup type="ts">
  import { ref,reactive,onMounted, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { Message, MessagePlugin } from 'tdesign-vue-next';
  import { getOptList } from '@/api/user';
  import { prefix } from '@/config/global';
  import {OPT_COLUMNS} from './constants'
  import $eventBus from '@/utils/eventBus'
  import {queryAiImg} from '@/api/picture'
  import {useUserStore} from '@/store'

const userStore=useUserStore()
const data = ref([]);
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
});
const dataLoading = ref(false);
const confirmVisible = ref(false);
const selectedRowKeys = ref([]);
const drawerVisible = ref(false);
const fetchData =  (paginationInfo) => {
  dataLoading.value = true;
  getOptList(paginationInfo).then(ret=>{
     const {items,totalItems,currentPage}=ret
     //console.log(JSON.stringify(items))
     data.value = items;
     pagination.total = totalItems;
     pagination.current = currentPage;

  }).catch(e=>{
    console.log('e  ',JSON.stringify(e))
    if(e.code===401)
    {
      //打开登录
       $eventBus.emit('OpenLoginEvent')
    }

  }).finally(()=>{
    dataLoading.value = false;
  })

};
// 刷新数据
const refresh = async () => {
  pagination.current = 1;
  await fetchData(pagination);
};
const rehandlePageChange = (pageInfo) => {
  console.log(`rehandlePageChange${JSON.stringify(pageInfo)}`);
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
  fetchData({page:pageInfo.current,pageSize:pageInfo.pageSize});
};

const handleClickDetail=(info)=>{
  console.log(JSON.stringify(info))
  let apiProvider=info.row.apiProvider
  if(apiProvider==='baidu-txt2img')
  {
    let taskId=info.row.jobId
    queryAiImg({taskId:taskId})
    .then(ret=>{
      console.log('ret',JSON.stringify(ret))
      if(ret.error_code!==0)
      {
        userStore.getAssetInfo()
        MessagePlugin.error(ret.error_msg+"("+ret.error_code+")")
        return;
      }else
      {
        MessagePlugin.success("任务己完成")
        // resultImages.value=[]
        // for(let i=0;i<ret.data.imgUrls.length;i++)
        // {
        //   resultImages.value.push(ret.data.imgUrls[i].image)
        // }
      }
    }).catch(e=>{
      console.log(JSON.stringify(e))
      // var  res=JSON.parse(info.row.response)
      // if(res.error_code!==0)
      // {
      //   MessagePlugin.error(res.error_msg+"("+res.error_code+")")
      //   return;
      // }
      if(e.msg)
      MessagePlugin.error(e.msg)
    })
  }

}

onMounted(async () => {
  await fetchData({
    page: pagination.current,
    pageSize: pagination.pageSize,
  });
});
</script>
